<template>
  <a-card :bordered="false">
    <!-- 用户操作日志 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="7" :sm="8">
            <a-form-item label="操作内容" :labelCol="{span: 6}" :wrapperCol="{span: 14, offset: 1}">
              <a-input placeholder="请输入操作内容" v-model="queryParam.dictName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="7" :sm="8">
            <a-form-item label="创建时间" :labelCol="{span: 6}" :wrapperCol="{span: 14, offset: 1}">
              <a-range-picker
                v-model="queryParam.createTimeRange"
                format="YYYY-MM-DD"
                :placeholder="['开始时间', '结束时间']"
                @change="onDateChange"
                @ok="onDateOk"
              />
            </a-form-item>
          </a-col>
          <a-col :md="7" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
      <!-- <a-button type="primary" icon="download" @click="handleExportXls('指标配置表')">导出</a-button>
      <a-upload
        name="file"
        :showUploadList="false"
        :multiple="false"
        :headers="tokenHeader"
        :action="importExcelUrl"
        @change="handleImportExcel"
      >
        <a-button type="primary" icon="import">导入</a-button>
      </a-upload> -->
      <!-- 高级查询区域 -->
      <j-super-query
        :fieldList="superFieldList"
        ref="superQueryModal"
        @handleSuperQuery="handleSuperQuery"
      ></j-super-query>
      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="batchDel"><a-icon type="delete" />删除</a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
      </a-dropdown>
    </div>

    <!-- table区域-begin -->
    <div>
      <!-- <div class="ant-alert ant-alert-info" style="margin-bottom: 16px">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择
        <a style="font-weight: 600">{{ selectedRowKeys.length }}</a
        >项
        <a style="margin-left: 24px" @click="onClearSelected">取消勾选</a>
      </div> -->

      <a-table
        ref="table"
        size="middle"
        :scroll="{ x: true }"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        class="j-table-force-nowrap"
        @change="handleTableChange"
      >
        <div slot="expandedRowRender" slot-scope="record" style="margin: 0">
          <div style="margin-bottom: 5px">
            <a-badge status="success" style="vertical-align: middle;"/>
            <span style="vertical-align: middle;">请求方法：请求方法请求方法请求方法
              请求方法请求方法请求方法请求方法请求方法请求方法请求方法请求方法请求方法请求方法请求方法请求方法请求方法请求方法请求方法请求方法请求方法请求方法请求方法请求方法请求方法请求方法请求方法</span>
          </div>
          <div style="margin-bottom: 5px">
            <a-badge status="success" style="vertical-align: middle;"/>
            <span style="vertical-align: middle;">请求参数:{{ record.method }}</span>
          </div>
          <div style="margin-bottom: 5px">
            <a-badge status="success" style="vertical-align: middle;"/>
            <span style="vertical-align: middle;">请求结果:{{ record.method }}</span>
          </div>
        </div>
      </a-table>
    </div>
  </a-card>
</template>

<script>
import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
// import { filterMultiDictText } from '@/components/dict/JDictSelectUtil'
export default {
  name: 'OperateLog',
  components: {},
  mixins: [JeecgListMixin, mixinDevice],
  data() {
    return {
      description: '用户操作日志',
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '操作时间',
          align: 'center',
          dataIndex: 'createBy'
        }
        // {
        //   title: '操作人',
        //   align: 'center',
        //   dataIndex: 'createBy'
        // },
        // {
        //   title: '操作类型',
        //   align: 'center',
        //   dataIndex: 'action'
        // },
        // {
        //   title: '操作内容',
        //   align: 'center',
        //   dataIndex: 'describe'
        // },
        // {
        //   title: '操作结果',
        //   align: 'center',
        //   dataIndex: 'describe'
        // }

      ],
      url: {
        list: '/sys/dict/list'
        // delete: '/index/scSituationIndexConfig/delete',
        // deleteBatch: '/index/scSituationIndexConfig/deleteBatch',
        // exportXlsUrl: '/index/scSituationIndexConfig/exportXls',
        // importExcelUrl: 'index/scSituationIndexConfig/importExcel'
      },
      superFieldList: []
    }
  },
  computed: {
    importExcelUrl: function() {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    }
  },
  methods: {
    getSuperFieldList() {
      const fieldList = []
      fieldList.push({ type: 'string', value: 'name', text: '指标名称', dictCode: '' })
      fieldList.push({ type: 'string', value: 'attributions', text: '其他属性', dictCode: '' })
      this.superFieldList = fieldList
    },
    onDateChange: function(value, dateString) {
      console.log(dateString[0], dateString[1])
      this.queryParam.createTime_begin = dateString[0]
      this.queryParam.createTime_end = dateString[1]
    },
    onDateOk(value) {
      console.log(value)
    }
  }
}
</script>
<style lang="less" scoped>
  @import '~@assets/less/common.less';
</style>
